<template>
  <div class="the-list">

    <div class="panel-search">
      <el-form inline :model="tableData.query" class="demo-form-inline">
        <el-form-item label="状态">
          <el-select v-model="tableData.query.reviewStatus" placeholder="状态">
            <el-option label="全部" value="0" />
            <el-option v-for="item in tableData.reviewStatusList" :key="item.key" :label="item.name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
            <el-date-picker
              v-model="tableData.query.reviewDate"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="tableFn.onSubmit">搜索</el-button>
          <el-button type="primary" @click="tableFn.onResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="panel-table">
      <div class="table-head">
        <span>评论列表</span>
      </div>
      <el-table :data="tableData.list" stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}" style="width: 100%;" border>
        <el-table-column prop="createdAt" label="发布时间" />

        <el-table-column prop="nickName" label="发布者">
          <template #default="{row}">
            <div class="isLink" @click="detailFn.gotoUserDetail(row.customerInfo.customerId)">
              {{row.username}}<br>
              {{row.phone}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容">
          <template #default="{row}">
            <el-tooltip effect="light" placement="left" :show-after="300">
              <template #content>
                <div style="max-width: 600px;">
                  {{row.content}}
                </div>
              </template>
              <div class="isBigText">{{row.content}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="imageUrl" label="略缩图/封面" width="106px">
          <template #default="{row}">
            <div v-if="row && row.imageUrl" @click="detailFn.openPanel(row)">
              <el-image style="width: 80px;height: 45px;display:block;" fit="contain" :src="row.imageUrl"/>
            </div>
            <p v-else>--</p>
          </template>
        </el-table-column>
        <el-table-column prop="reviewStatus" label="审核状态">
          <template #default="{row}">
            <span v-if="row.reviewStatus==1" style="color:#F59A23;">待审核</span>
            <span v-else-if="row.reviewStatus==3" style="color:#95F204;">通过</span>
            <span v-else style="color:#D9001B;">拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="审核失败原因">
          <template #default="{row}">
            <el-tooltip effect="light" placement="left" :show-after="300">
              <template #content>
                <div style="max-width: 600px;">
                  {{row.reason}}
                </div>
              </template>
              <div class="isBigText">{{row.reason}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200px" align="center">
          <template #default="{row}">
            <template v-if="row.reviewStatus == 1 &&  hasPermission(['content:examine'])">
              <el-button size="small" type="success" plain @click="auditFn.openPanel('agree',row)">通过</el-button>
              <el-button size="small" type="danger" plain @click="auditFn.openPanel('reject',row)">拒绝</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-pagination">
        <pagination :total="tableData.total" v-model:page="tableData.query.page" v-model:limit="tableData.query.pageSize" @pagination="tableFn.getTableData" />
      </div>

    </div>

    <auditPopup v-model="auditData.showPanel" :itemId="auditData.itemId" :status="auditData.status" @submitCompleted="tableFn.getTableData"></auditPopup>
    <contentPopup v-model="detailData.showPanel" :type="detailData.type" :data="detailData.data"></contentPopup>
  </div>
  </template>


  <script>
  import Pagination from "@/components/Pagination";
  import { ref, reactive, watchEffect } from "vue";
  import { getReviewList } from "@/api/eventsinfo.js";
  import {  useRouter } from "vue-router";
  import auditPopup from "./components/auditPopup.vue";
  import contentPopup from "./components/contentPopup.vue";
  import { ElMessage } from 'element-plus';
  import {gotoUserDetail} from "@/utils/tool"

  export default {
  name: "ReviewedList",
  components:{
    Pagination,
    auditPopup,
    contentPopup,
  },
  setup() {
    // 默认数据备份，以便重置或恢复
    const { $data: tableData, $fn: tableFn } = tableModule();
    const { $data: auditData, $fn: auditFn } = auditModule();
    const { $data: detailData, $fn: detailFn } = detailModule();

    return {
      tableData,
      tableFn,
      auditData,
      auditFn,
      detailData,
      detailFn,
    };
  },
};

// 表格功能模块，包括搜索，分页等
function tableModule() {
  const router = useRouter();
  const params = ref({});
  const query = ref({});

  watchEffect(()=>{
      console.log(router.currentRoute.value.params);
      params.value = router.currentRoute.value.params;
  })
  watchEffect(()=>{
      query.value = router.currentRoute.value.query;
  })
  const backup = {
      query: {
        reviewDate:[],
        eventsId:"",
        reviewStatus: '1',
        pageSize: 10,
        page: 1,
      },
    };

    const $data = reactive({
      query: { ...backup.query },
      list: [],
      total: 0,
      reviewStatusList: [
      { key: '1', name: "待审核"},
      { key: '2', name: "审核未通过"},
      { key: '3', name: "审核通过"},
      ],

    });
  const $fn = {
    getTableData() {
        console.log("params");
        console.log(params.value);
        $data.query.eventsId = params.value.id;
        if(!!$data.query.reviewDate){
          $data.query.createStartTime = $data.query.reviewDate[0]
          $data.query.createEndTime = $data.query.reviewDate[1]
        }else{
          $data.query.createStartTime = undefined
          $data.query.createEndTime = undefined
        }
        let queryParams = {};
        Object.assign(queryParams,$data.query);
        queryParams.reviewDate = undefined;
        getReviewList(queryParams).then((res) => {
          if (res.code === 0) {
            $data.list = res.data.items || [];
            $data.total = res.data.pagination.total_record;
          }
        });
      },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableData();
    },
    onSubmit() {
        $fn.getTableData();
      },
    goToDetail(row) {
      router.push('/content/detail/' + row.id+"?view=detail");
    },
  };

  $fn.getTableData();

  return {
    $data,
    $fn,
  };
}

//审核相关
function auditModule() {

   const $data = reactive({
      showPanel: false,
      status: "",
      itemId:"",
    });

    const $fn = {
      openPanel(status,row){
        $data.status = status;
        $data.itemId = row.id;
        $data.showPanel = true;
      },
    };

    return {
      $data,
      $fn,
    }
}

  //弹框详情
function detailModule(){
    const $data = reactive({
      showPanel: false,
      type: "",
      data:{},
    })

    const $fn = {
      openPanel(row){
        $data.type = row.type;
        $data.data = {...row};
        $data.showPanel = true;
      },
      gotoUserDetail(userId){
        gotoUserDetail(userId);
      }
    }

    return {
      $data,
      $fn,
    }
}


  </script>

  <style scoped lang="scss">
  @import "@/styles/tablePage.scss";
  .the-list{
    height: 100%;
  }
  .el-form-item {
    margin-bottom: 8px;
  }
  </style>
